<template>
  <div class="operation">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item.title"
          :name="item.name + ''"
          v-for="item in tabList"
          :key="item.id"
        >
          <el-form :model="form" label-width="80px">
            <el-form-item label="科目/章节">
              <Cascader @getid="getid" :cascade="cascade" />
            </el-form-item>
            <el-form-item label="题干">
              <Editor
                :main="form.title"
                :symbol="'titlemain'"
                @editorchange="onEditorChange"
              />
            </el-form-item>
            <!-- 题型组件 -->
            <component :formData="form" :is="item.name" />

            <el-form-item label="难易度">
              <Difficulty
                @getdifficulty="getdifficulty"
                :valued="value"
                :options="diffCultyList"
              />
            </el-form-item>
            <el-form-item label="解析">
              <Editor
                :main="form.analysis"
                :symbol="'analysismain'"
                @editorchange="onEditorChange"
              />
            </el-form-item>
            <el-form-item>
              <Submit :data="form" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import Editor from "../../../components/editor";
import Submit from "./submit.vue";
import Difficulty from "@/components/difficulty";
import Cascader from "@/components/cascader";
import { getQuestionById } from "./index";
const choice = () => import("./choices.vue");
const completion = () => import("./completion.vue");
const judge = () => import("./judge.vue");
const answer = () => import("./answer.vue");
import { request } from "../../../api/request";
export default {
  components: {
    choice,
    completion,
    judge,
    answer,
    Cascader,
    Difficulty,
    Submit,
    Editor,
  },
  data() {
    return {
      // 难易度
      value: "",
      //  级联选择器默认数据
      cascade: [],
      activeName: "choice",
      tabList: [],
      typeId: -1,
      form: {
        title: "",
        answer: [],
        analysis: "",
        questionid: "",
        options: [{ id: 0, content: "", sign: "A" }],
      },
        childData: this.form,
      // 下拉菜单 难易度 数据
      diffCultyList: [
        { label: "简单", value: "简单" },
        { label: "容易", value: "容易" },
        { label: "困难", value: "困难" },
      ],
    };
  },
  activated() {
    // this.getquestionById();
  },
  created() {
    this.getList();
    this.typeId = this.$route.query.typeid;
    this.getQuestionOne();
  },
  methods: {
    // 多选框变化
    handleCheckboxChange() {},
    onEditorChange(e, s, id) {
      if (id === -1) {
        switch (s) {
          case "titlemain":
            this.form.title = e;
            break;
          case "analysismain":
            this.form.analysis = e;
            break;
        }
      } else {
        this.form.options[id].content = e;
      }
    },
    // 获取科目和章节 id
    getid(catalougeid, chapterid) {
      this.form.catalouge_id = catalougeid;
      this.form.chapter_id = chapterid;
      this.form.type_id = 1;
    },
    // 获取难易程度
    getdifficulty(val) {
      this.form.difficulty = val;
      this.value = val;
    },
    // 根据路由id获取试题
    getQuestionOne() {
      this.questionid = this.$route.query.id;
      if (this.questionid) {
        getQuestionById(this.questionid).then((res) => {
          this.form = res;
          this.cascade[0] = res.catalouge_id; // 级联选择器数据
          this.cascade[1] = res.chapter_id; // 级联选择器数据
          this.value = res.difficulty;
        });
        console.log("父组件");
      }
    },
    getList() {
      request({
        method: "GET",
        url: "questiontype",
        route: "list",
      }).then((res) => {
        if (!this.typeId) {
          this.tabList = res.data;
        } else {
          this.tabList = res.data.filter((item) => item.id == this.typeId);
        }
      });
    },
    handleClick(tab, event) {
      tab, event;
    },
  },
};
</script>